<template>

  <div>
    <el-divider></el-divider>
    <!--操作按钮-->
    <div>
      <div style="display: flex;justify-content: space-between">
        <div>
          <el-input v-model="text" style="width: 300px;margin-right: 10px;"
                    size="small" placeholder="请输入答题内容" clearable @clear="initTable">
          </el-input>
          <el-button type="primary" @click="textPage(text)" icon="el-icon-search"
                     size="small" style="width: 90px;">搜索
          </el-button>
        </div>
      </div>
    </div>
    <!--分页列表-->
    <div class="tableSet">
      <!--handleSelectionChange 复选框点击事件，就是每一条数据前面的勾选按钮-->
      <el-table
          border
          ref="multipleTable"
          :data="page.data"
          tooltip-effect="dark"
          style="width: 100%"
          size="small"
          v-loading="loading">
        <el-table-column
            prop="cs_id"
            label="数据编号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="cs_tk_id"
            label="作业编号"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="cs_user_name"
            label="完成学生"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="cs_answer"
            label="答题内容"
            width="400"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="cs_fraction"
            label="得分"
            width="80"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="cs_create_time"
            label="完成时间"
            width="250"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="操作"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <!--$index 下标，row 行数据-->
            <el-button
                v-if="user.teacher && courseEnd === '1'"
                size="mini"
                 type="success"
                @click="thenGrade(scope.$index, scope.row)">打分
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页控制组件-->
    <div class="block">
      <!--/**
      * 当前条数，@size-change 自动带过来的
      * @param val
      */-->
      <!-- /**
     * 当前页，@current-change 自动带过来的
     */-->
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="size"
          layout="total, prev, pager, next, sizes, jumper"
          :total="page.total">
      </el-pagination>

    </div>


    <!--弹窗，点了编辑会先给addData中的字段赋值，因为编写需要通过id去改该条数据-->
    <div>
      <el-dialog
          title="学生打分"
          :visible.sync="studentPM"
          width="30%"
          :before-close="handleClose"
          center>
        <el-form :label-position="textAlign"
                 :model="updateScore" status-icon ref="ScoreRuleForm" label-width="100px" class="demo-ruleForm"
                 :rules="updateScoreRuleForm">
          <el-form-item label="作业编号:">
            <el-input style="width: 92%" v-model="updateScore.csId" disabled></el-input>
          </el-form-item>
          <el-form-item label="作业得分:" prop="score">
            <el-input style="width: 92%" v-model="updateScore.score" clearable></el-input>
          </el-form-item>
          <div style="text-align: center">
            <el-form-item>
              <!--@keydown.enter.native 键盘回车触发-->
              <el-button type="primary" @click="updateScoreForm(updateScore)">提交</el-button>
              <el-button @click="cancel()">取 消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </div>


  </div>
</template>

<script>

import uploadFile from "@/components/file/upload-file";

export default {
  name: "PerMv",
  //导入组件
  components: {
    uploadFile
  },
  data() {
    return {
      courseEnd: this.$route.query.itmStatus,
      // 打分
      updateScore: {
        score: '',
        csId: 0
      },
      // 打分弹窗
      studentPM: false,
      // 获取当前登录用户信息，在manin.js登录验证存进的session，接口获取的是一个json格式字符串，转换为js对象
      user: JSON.parse(window.sessionStorage.getItem('user')),
      // 表单文字对其方式
      textAlign: 'right',
      // 加载动画
      loading: false,
      // 弹窗控制，true打开弹窗，false关闭弹窗
      dialogVisible: false,
      // 增加修改对象
      addData: {
        cs_id: 0,
        cs_answer: '',
        cs_tk_id: this.$route.query.tkId
      },
      // 分页对象
      page: {
        total: 0,
        data: [{}]
      },
      // 第几页，默认第一页
      currentPage: 1,
      // 每页大小，默认10条数据一页
      size: 10,
      // 分页搜索文本
      text: '',
      updateScoreRuleForm: {
        score: [
          {required: true, message: '请输入分数', trigger: 'blur'}
        ]
      },
      // 批量操作ids
      ids: []
    }
  },
  // 一进入页面就要调用的接口放到 mounted 里面，比如页面表格分页
  mounted() {
    this.initTable();
  },
  methods: {
    /**
     * 文本搜索
     */
    textPage(text) {
      this.text = text;
      this.initTable();
    },
    /**
     * 分页数据
     */
    initTable() {
      this.loading = true
      this.getRequestParams("/course/submitTaskPage",
          {
            currentPage: this.currentPage,
            size: this.size,
            text: this.text,
            tkId: this.$route.query.tkId
          }).then(data => {
        if (data) {
          console.log(data)
          this.page = data
          this.loading = false;
        }
      })
    },
    /**
     * 添加按钮点击事件
     */
    thenAdd() {
      this.addData = {tk_id: 0};
      this.dialogVisible = true;
      // this.$refs.ruleForm.resetFields();
    },
    /**
     * 编辑按钮点击事件
     */
    thenUpdate(index, data) {
      console.log(data)
      this.addData = {
        tk_id: data.tk_id,
        title: data.tk_title,
        name: data.tk_name
      }
      console.log(this.addData)
      this.dialogVisible = true
    },
    /**
     * 取消
     */
    cancel() {
      this.studentPM = false
      // 关闭弹窗
      this.dialogVisible = false
      // 初始化
      this.addData = {}
      // 清除表单校验
      this.$refs.ruleForm.resetFields()
    },
    /**
     * 关闭弹窗
     * @param done
     */
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {// 确定关闭
            // 初始化
            this.addData = {};
            // 初始化
            this.updateScore = {};
            // 清除表单校验
            this.$refs.ruleForm.resetFields();
            // 清除表单校验
            this.$refs.ScoreRuleForm.resetFields();
            done();
          })
          .catch(_ => {// 不关闭弹窗

          });
    },
    /**
     * val 这个是当前页，@current-change 自动带过来的
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    /**
     * val 这个是当前条数，@size-change 自动带过来的
     * @param val
     */
    handleSizeChange(val) {
      this.size = val;
      this.initTable();
    },
    /**
     * 打分
     */
    thenGrade(index, data) {
      this.studentPM = true
      this.updateScore.csId = data.cs_id
    }
    ,
    /**
     * 打分完成
     */
    updateScoreForm() {
      // 正则校验表单数据
      this.$refs.ScoreRuleForm.validate((valid) => {
        if (valid) {// 验证通过
          // 调用添加接口
          this.postRequestParams('/course/taskScore', this.updateScore).then(data => {
            // 添加成功
            if (data) {
              // 刷新表格数据
              this.initTable();
              this.updateScore = {}
            }
          })
          // 关闭弹窗
          this.studentPM = false;
        } else {
          this.$message.error('请输入必填项!');
          return false;
        }
      });
    }
  }

}
</script>

<style scoped>

.tableSet {
  margin-top: 10px;
}

.block {
  margin-top: 10px;
  text-align: center;
}


</style>